<template>
  <el-container class="mt-2 pl-0 d-flex flex-column" style="overflow: hiddend; ">
    <el-row class="d-flex">
      <el-col :span="21">
        <div class="grid-content bg-purple-light">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
            @tab-click="tab_click"
          >
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              :route="item.route"
            >{{item.content}}</el-tab-pane>
          </el-tabs>
        </div>
      </el-col>

      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-dropdown @command="handleCommand">
            <el-button type="primary">
              页签操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="allOpen">打开全部</el-dropdown-item>
              <el-dropdown-item command="closeThis">关闭当前</el-dropdown-item>
              <el-dropdown-item command="allClose">全部关闭(首页)</el-dropdown-item>
              <el-dropdown-item command="onlyThis">除此之外全部关闭</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple">
          <el-button type="info" icon="el-icon-view" @click="changeSpcan"></el-button>
        </div>
      </el-col>
    </el-row>
    <el-row class="d-flex flex-1">
      <el-col :span="24" class="son-contain flex-1">
          <router-view />
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      //陆用行政村用户信息
      admin: {},
      //选中的名字
      editableTabsValue: "/info/basic",
      //标签页的内容
      editableTabs: [],
      //序号标签
      tabIndexAtt: [],
      //数据集
      editableTabs1: [
        {
          title: "行政村基本信息",
          name: "/info/basic",
          route: "/info/basic"
        },
        {
          title: "行政村组信息",
          name: "/info/group",
          route: "/info/group"
        },
        // {
        //   title: "行政村户信息",
        //   name: "/info/house",
        //   route: "/info/house"
        // },
        {
          title: "职务信息",
          name: "/info/job",
          route: "/info/job"
        },
        {
          title: "行政村补助项信息",
          name: "/info/subsidy-type",
          route: "/info/subsidy-type"
        },
        {
          title: "行政村补助信息",
          name: "/info/subsidy-info",
          route: "/info/subsidy-info"
        },
        {
          title: "行政村用户信息",
          name: "/info/village",
          route: "/info/village"
        },
        {
          title: "村干部信息",
          name: "/info/cadre",
          route: "/info/cadre"
        },
        {
          title: "党员信息",
          name: "/info/party",
          route: "/info/party"
        },
        {
          title: "党员发展",
          name: "/info/org",
          route: "/info/org"
        },
        {
          title: "户口迁移",
          name: "/info/account",
          route: "/info/account"
        },
        {
          title: "资源",
          name: "/caption/resource",
          route: "/caption/resource"
        },
        {
          title: "资产",
          name: "/caption/assets",
          route: "/caption/assets"
        },
        {
          title: "资金",
          name: "/caption/funds",
          route: "/caption/funds"
        },
        {
          title: "项目信息",
          name: "/caption/construction",
          route: "/caption/construction"
        },
        {
          title: "理财",
          name: "/caption/finan",
          route: "/caption/finan"
        },
        {
          title: "党规党纪",
          name: "/release/policy",
          route: "/release/policy"
        },
        {
          title: "学习园地",
          name: "/release/legal",
          route: "/release/legal"
        },
        {
          title: "村告栏",
          name: "/release/announ",
          route: "/release/announ"
        },
        {
          title: "行政村会议",
          name: "/release/meeting",
          route: "/release/meeting"
        },
        {
          title: "教育资讯",
          name: "/release/edu",
          route: "/release/edu"
        },
        {
          title: "党组织活动",
          name: "/release/org-act",
          route: "/release/org-act"
        },
        {
          title: "村组织活动",
          name: "/release/act",
          route: "/release/act"
        },
        {
          title: "村内发展规划",
          name: "/release/plan",
          route: "/release/plan"
        },
        {
          title: "管理员设置",
          name: "/admin",
          route: "/admin"
        },
        {
          title: "待处理群众意见建议",
          name: "/feedback/to-processed",
          route: "/feedback/to-processed"
        },
        {
          title: "已处理群众意见建议",
          name: "/feedback/processed",
          route: "/feedback/processed"
        },
        {
          title: "向上群众意见建议记录",
          name: "/feedback/upward",
          route: "/feedback/upward"
        },
        {
          title: "系统日志",
          name: "/log",
          route: "/log"
        }
      ],
      //区级管理
      editableTabs2: [
        {
          title: "行政村基本信息",
          name: "/info/basic",
          route: "/info/basic"
        },
        {
          title: "行政村组信息",
          name: "/info/group",
          route: "/info/group"
        },
        // {
        //   title: "行政村户信息",
        //   name: "/info/house",
        //   route: "/info/house"
        // },
        // {
        //   title: "职务信息",
        //   name: "/info/job",
        //   route: "/info/job"
        // },
        {
          title: "行政村补助项信息",
          name: "/info/subsidy-type",
          route: "/info/subsidy-type"
        },
        {
          title: "行政村补助信息",
          name: "/info/subsidy-info",
          route: "/info/subsidy-info"
        },

        {
          title: "行政村用户信息",
          name: "/info/village",
          route: "/info/village"
        },
        {
          title: "村干部信息",
          name: "/info/cadre",
          route: "/info/cadre"
        },
        {
          title: "党员信息",
          name: "/info/party",
          route: "/info/party"
        },
        {
          title: "党员发展",
          name: "/info/org",
          route: "/info/org"
        },
        {
          title: "户口迁移",
          name: "/info/account",
          route: "/info/account"
        },
        {
          title: "资源",
          name: "/caption/resource",
          route: "/caption/resource"
        },
        {
          title: "资产",
          name: "/caption/assets",
          route: "/caption/assets"
        },
        {
          title: "资金",
          name: "/caption/funds",
          route: "/caption/funds"
        },
        {
          title: "项目信息",
          name: "/caption/construction",
          route: "/caption/construction"
        },
        {
          title: "理财",
          name: "/caption/finan",
          route: "/caption/finan"
        },
        {
          title: "政策",
          name: "/release/policy",
          route: "/release/policy"
        },
        {
          title: "学习园地",
          name: "/release/legal",
          route: "/release/legal"
        },
        {
          title: "村告栏",
          name: "/release/announ",
          route: "/release/announ"
        },
        {
          title: "行政村会议",
          name: "/release/meeting",
          route: "/release/meeting"
        },
        {
          title: "教育资讯",
          name: "/release/edu",
          route: "/release/edu"
        },
        {
          title: "党组织活动",
          name: "/release/org-act",
          route: "/release/org-act"
        },
        {
          title: "村组织活动",
          name: "/release/act",
          route: "/release/act"
        },
        // {
        //   title: "村内发展规划",
        //   name: "/release/plan",
        //   route: "/release/plan",
        // },
        {
          title: "管理员设置",
          name: "/admin",
          route: "/admin"
        },
        {
          title: "向上群众意见建议记录",
          name: "/feedback/upward",
          route: "/feedback/upward"
        },
        {
          title: "系统日志",
          name: "/log",
          route: "/log"
        }
      ],
      //镇管理
      editableTabs4: [
        {
          title: "行政村基本信息",
          name: "/info/basic",
          route: "/info/basic"
        },
        {
          title: "行政村组信息",
          name: "/info/group",
          route: "/info/group"
        },
        {
          title: "行政村户信息",
          name: "/info/house",
          route: "/info/house"
        },
        {
          title: "职务信息",
          name: "/info/job",
          route: "/info/job"
        },
        {
          title: "行政村补助项信息",
          name: "/info/subsidy-type",
          route: "/info/subsidy-type"
        },
        {
          title: "行政村补助信息",
          name: "/info/subsidy-info",
          route: "/info/subsidy-info"
        },

        {
          title: "行政村用户信息",
          name: "/info/village",
          route: "/info/village"
        },
        {
          title: "村干部信息",
          name: "/info/cadre",
          route: "/info/cadre"
        },
        {
          title: "党员信息",
          name: "/info/party",
          route: "/info/party"
        },
        {
          title: "党员发展",
          name: "/info/org",
          route: "/info/org"
        },
        {
          title: "户口迁移",
          name: "/info/account",
          route: "/info/account"
        },
        {
          title: "资源",
          name: "/caption/resource",
          route: "/caption/resource"
        },
        {
          title: "资产",
          name: "/caption/assets",
          route: "/caption/assets"
        },
        {
          title: "资金",
          name: "/caption/funds",
          route: "/caption/funds"
        },
        {
          title: "项目信息",
          name: "/caption/construction",
          route: "/caption/construction"
        },
        {
          title: "理财",
          name: "/caption/finan",
          route: "/caption/finan"
        },
        {
          title: "政策",
          name: "/release/policy",
          route: "/release/policy"
        },
        {
          title: "学习园地",
          name: "/release/legal",
          route: "/release/legal"
        },
        {
          title: "村告栏",
          name: "/release/announ",
          route: "/release/announ"
        },
        {
          title: "行政村会议",
          name: "/release/meeting",
          route: "/release/meeting"
        },
        {
          title: "教育资讯",
          name: "/release/edu",
          route: "/release/edu"
        },
        {
          title: "党组织活动",
          name: "/release/org-act",
          route: "/release/org-act"
        },
        {
          title: "村组织活动",
          name: "/release/act",
          route: "/release/act"
        },
        {
          title: "村内发展规划",
          name: "/release/plan",
          route: "/release/plan"
        },
        {
          title: "待处理群众意见建议",
          name: "/feedback/to-processed",
          route: "/feedback/to-processed"
        },
        {
          title: "已处理群众意见建议",
          name: "/feedback/processed",
          route: "/feedback/processed"
        }
      ],
      //职能部门
      editableTabs3: [
        {
          title: "行政村基本信息",
          name: "/info/basic",
          route: "/info/basic"
        },
        {
          title: "行政村组信息",
          name: "/info/group",
          route: "/info/group"
        },
        // {
        //   title: "行政村户信息",
        //   name: "/info/house",
        //   route: "/info/house"
        // },
        {
          title: "职务信息",
          name: "/info/job",
          route: "/info/job"
        },
        {
          title: "行政村补助项信息",
          name: "/info/subsidy-type",
          route: "/info/subsidy-type"
        },
        {
          title: "行政村补助信息",
          name: "/info/subsidy-info",
          route: "/info/subsidy-info"
        },

        {
          title: "行政村用户信息",
          name: "/info/village",
          route: "/info/village"
        },
        {
          title: "村干部信息",
          name: "/info/cadre",
          route: "/info/cadre"
        },
        {
          title: "党员信息",
          name: "/info/party",
          route: "/info/party"
        },
        {
          title: "党员发展",
          name: "/info/org",
          route: "/info/org"
        },
        {
          title: "户口迁移",
          name: "/info/account",
          route: "/info/account"
        },
        {
          title: "资源",
          name: "/caption/resource",
          route: "/caption/resource"
        },
        {
          title: "资产",
          name: "/caption/assets",
          route: "/caption/assets"
        },
        {
          title: "资金",
          name: "/caption/funds",
          route: "/caption/funds"
        },
        {
          title: "项目信息",
          name: "/caption/construction",
          route: "/caption/construction"
        },
        {
          title: "理财",
          name: "/caption/finan",
          route: "/caption/finan"
        },
        {
          title: "政策",
          name: "/release/policy",
          route: "/release/policy"
        },
        {
          title: "学习园地",
          name: "/release/legal",
          route: "/release/legal"
        },
        {
          title: "村告栏",
          name: "/release/announ",
          route: "/release/announ"
        },
        {
          title: "行政村会议",
          name: "/release/meeting",
          route: "/release/meeting"
        },
        {
          title: "教育资讯",
          name: "/release/edu",
          route: "/release/edu"
        },
        {
          title: "党组织活动",
          name: "/release/org-act",
          route: "/release/org-act"
        },
        {
          title: "村组织活动",
          name: "/release/act",
          route: "/release/act"
        },
        {
          title: "村内发展规划",
          name: "/release/plan",
          route: "/release/plan"
        },
        {
          title: "管理员设置",
          name: "/admin",
          route: "/admin"
        },
        {
          title: "待处理群众意见建议",
          name: "/feedback/to-processed",
          route: "/feedback/to-processed"
        },
        {
          title: "已处理群众意见建议",
          name: "/feedback/processed",
          route: "/feedback/processed"
        },
        {
          title: "系统日志",
          name: "/log",
          route: "/log"
        }
      ],
      //村级管理
      editableTabs5: [
        {
          title: "行政村基本信息",
          name: "/info/basic",
          route: "/info/basic"
        },
        {
          title: "行政村组信息",
          name: "/info/group",
          route: "/info/group"
        },
        // {
        //   title: "行政村户信息",
        //   name: "/info/house",
        //   route: "/info/house"
        // },
        {
          title: "职务信息",
          name: "/info/job",
          route: "/info/job"
        },
        {
          title: "行政村补助项信息",
          name: "/info/subsidy-type",
          route: "/info/subsidy-type"
        },
        {
          title: "行政村补助信息",
          name: "/info/subsidy-info",
          route: "/info/subsidy-info"
        },

        {
          title: "行政村用户信息",
          name: "/info/village",
          route: "/info/village"
        },
        {
          title: "村干部信息",
          name: "/info/cadre",
          route: "/info/cadre"
        },
        {
          title: "党员信息",
          name: "/info/party",
          route: "/info/party"
        },
        {
          title: "党员发展",
          name: "/info/org",
          route: "/info/org"
        },
        {
          title: "户口迁移",
          name: "/info/account",
          route: "/info/account"
        },
        {
          title: "资源",
          name: "/caption/resource",
          route: "/caption/resource"
        },
        {
          title: "资产",
          name: "/caption/assets",
          route: "/caption/assets"
        },
        {
          title: "资金",
          name: "/caption/funds",
          route: "/caption/funds"
        },
        {
          title: "项目信息",
          name: "/caption/construction",
          route: "/caption/construction"
        },
        {
          title: "理财",
          name: "/caption/finan",
          route: "/caption/finan"
        },
        {
          title: "政策",
          name: "/release/policy",
          route: "/release/policy"
        },
        {
          title: "学习园地",
          name: "/release/legal",
          route: "/release/legal"
        },
        {
          title: "村告栏",
          name: "/release/announ",
          route: "/release/announ"
        },
        {
          title: "行政村会议",
          name: "/release/meeting",
          route: "/release/meeting"
        },
        {
          title: "教育资讯",
          name: "/release/edu",
          route: "/release/edu"
        },
        {
          title: "党组织活动",
          name: "/release/org-act",
          route: "/release/org-act"
        },
        {
          title: "村组织活动",
          name: "/release/act",
          route: "/release/act"
        },
        {
          title: "村内发展规划",
          name: "/release/plan",
          route: "/release/plan"
        }
      ]
    };
  },
  methods: {
    changeSpcan() {
      this.$emit("changeSpcan");
    },
    getPath() {
      return this.$route.path;
    },
    tab_click(item) {
      this.$router.replace({ path: item.$attrs.route });
    },
    addTab(targetName) {
      this.editableTabs1.forEach((item, index) => {
        // console.log(item.route);
        if (item.route == this.$route.path) {
          //原先不存在的标签
          if (this.tabIndexAtt.indexOf(index) == -1) {
            this.tabIndexAtt.push(index);
            this.editableTabs.push(item);
          }
          this.editableTabsValue = item.name;
        }
      });
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            this.editableTabs.splice(index, 1);
            this.tabIndexAtt.splice(index, 1);
            if (nextTab) {
              this.$router.replace({ path: nextTab.route });
              console.log(nextTab);
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    handleCommand(command) {
      switch (command) {
        case "closeThis":
          this.closeThis();
          break;
        case "allClose":
          this.allClose();
          break;
        case "onlyThis":
          this.onlyThis();
          break;
        case "allOpen":
          this.allOpen();
          break;
      }
    },
    allClose() {
      this.tabIndexAtt = [];
      this.editableTabs = [];
    },
    closeThis() {
      this.removeTab(this.editableTabsValue);
    },
    onlyThis() {
      let attTabs = [];
      let attIndex = [];
      this.editableTabs.forEach((item, index) => {
        if (item.name == this.editableTabsValue) {
          attTabs.push(item);
          attIndex.push(index);
        }
      });
      this.editableTabs = attTabs;
      this.tabIndexAtt = attIndex;
    },
    allOpen() {
      this.editableTabs1.forEach((item, index) => {
        //原先不存在的标签
        if (this.tabIndexAtt.indexOf(index) == -1) {
          this.tabIndexAtt.push(index);
          this.editableTabs.push(item);
        }
        this.editableTabsValue = item.name;
      });
      this.$router.replace({ path: this.editableTabsValue });
    }
  },
  created() {
    this.admin = this.$util.handleLocalStorage("get", "admin");
    switch (this.admin.mType) {
      case 2:
        this.editableTabs1 = this.editableTabs2;
        break;
      case 3:
        this.editableTabs1 = this.editableTabs3;
        break;
      case 4:
        this.editableTabs1 = this.editableTabs4;
        break;
      case 5:
        this.editableTabs1 = this.editableTabs5;
        break;
    }
    this.addTab();
  },
  watch: {
    $route: "addTab"
  }
};
</script>
<style>
.son-contain {
  margin-top: 10px;
  padding-left: 8px;
}
.el-tabs__nav-wrap.is-scrollable {
  padding: 0 50px;
}
.el-tabs__nav-prev {
  width: 50px;
  font-size: 14px;
}
.el-tabs__nav-next {
  width: 50px;
  font-size: 14px;
}
/* 表格每行高度调整 */
/* .el-table__body .el-table__row{
  height: 10px!important;
} */
</style>
